﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立冬活泼版满屏祝福</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            overflow: hidden;
            background: url('https://sns-na-i1.xhscdn.com/664ff9f1-1d22-cd97-6f5a-49deeeb8aa77?imageView2/2/w/720/format/webp') center center no-repeat;
            background-size: cover;
            background-attachment: fixed;
            height: 100vh;
            font-family: "微软雅黑", sans-serif;
        }
        /* 雪花优化：大中小掺杂+自然摇摆 */
        .snow {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            opacity: 0.8;
            /* 雪花左右摇摆动画 */
            animation: snowfall linear infinite;
        }
        @keyframes snowfall {
            0% { transform: translate(0, -10px); }
            50% { transform: translate(10px, 50vh); }
            100% { transform: translate(-5px, 100vh); }
        }
        /* 祝福窗口：先放大后缩小+倾斜+立冬装饰 */
        .blessing-window {
            position: absolute;
            font-size: 16px;
            font-weight: bold;
            padding: 12px 18px;
            border-radius: 8px;
            color: #e63946;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            /* 先放大后缩小动画（更活泼） */
            animation: popupBounce 0.8s ease-out forwards;
            opacity: 0.95;
            transform: scale(0) rotate(0deg);
            white-space: normal;
            word-wrap: break-word;
            width: 160px;
            height: auto;
            line-height: 1.5;
            /* 立冬装饰：雪花/冬枝图案+半透明底色（不呆板） */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23e63946" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v2"/><path d="M16 2v2"/><path d="M3 10h2"/><path d="M19 10h2"/><path d="M3 14h2"/><path d="M19 14h2"/><path d="M8 22v-2"/><path d="M16 22v-2"/><path d="M12 6v12"/><path d="M6 12h12"/></svg>');
            background-size: 20px;
            background-blend-mode: overlay;
        }
        @keyframes popupBounce {
            0% { opacity: 0; transform: scale(0) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.1) rotate(var(--rotate-angle)); } /* 中间放大到1.1倍 */
            100% { opacity: 0.95; transform: scale(1) rotate(var(--rotate-angle)); } /* 最终回到1倍+保持倾斜 */
        }
        /* 顶部标题 */
        .title {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 32px;
            color: #fff;
            text-shadow: 0 2px 5px rgba(0,0,0,0.5);
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="title">立冬安康 · 好运满屏 ❄️</div>

    <script>
        const blessings = [
            "立冬添暖衣，考研笔锋锐，岸上见！",
            "冬来寒意起，考公稳上岸，前路坦途~",
            "立冬快乐！钱包鼓鼓，财运追着跑💰",
            "寒风裹温柔，身体倍儿棒，病痛全溜~",
            "立冬已至，考研初试稳，复试顺拿offer！",
            "冬藏好运气，考公笔试第一，面试超神！",
            "立冬暖身又暖心，发财速度赶雪花飘~",
            "冬来无恙，健康常驻，岁岁皆安❤️",
            "立冬裹厚衣，考研知识点全进脑，高分稳！",
            "寒风吹不散运，考公上岸+钱包鼓，双倍乐~",
            "立冬快乐！身体像小太阳，暖和又健康",
            "冬意渐浓，发财脚步不停，钱包越来越鼓~"
        ];
        // 窗口背景色（柔和渐变感，搭配装饰图案）
        const windowBgColors = [
            "linear-gradient(135deg, #f8c8dc 0%, #ffe0e0 100%)",
            "linear-gradient(135deg, #ffe0e0 0%, #ffd6e0 100%)",
            "linear-gradient(135deg, #ffd6e0 0%, #fbcfe8 100%)",
            "linear-gradient(135deg, #fbcfe8 0%, #ffccd5 100%)"
        ];

        // 雪花分阶段控制：前期慢→中期剧烈→后期渐停
        let snowStage = "slow"; // 初始阶段：慢
        let snowTimer;

        // 生成雪花（分阶段调整速度和大小）
        function createSnow() {
            const snow = document.createElement("div");
            snow.className = "snow";
            
            // 大中小雪花掺杂（2-4px小，5-8px中，9-12px大）
            const sizeType = Math.random();
            let size;
            if (sizeType < 0.5) size = 2 + Math.random() * 3; // 小雪花占比50%
            else if (sizeType < 0.8) size = 5 + Math.random() * 4; // 中雪花占比30%
            else size = 9 + Math.random() * 4; // 大雪花占比20%
            snow.style.width = snow.style.height = `${size}px`;
            
            // 分阶段调整下落速度
            let duration;
            if (snowStage === "slow") duration = 15 + Math.random() * 10; // 前期慢：15-25秒
            else if (snowStage === "intense") duration = 5 + Math.random() * 5; // 中期剧烈：5-10秒
            else duration = 20 + Math.random() * 15; // 后期渐慢：20-35秒
            snow.style.animationDuration = `${duration}s`;
            
            snow.style.left = `${Math.random() * 100}vw`;
            document.body.appendChild(snow);
            setTimeout(() => snow.remove(), duration * 1000);
        }

        // 雪花阶段切换（0-20秒慢，20-50秒剧烈，50-60秒渐慢）
        setTimeout(() => { snowStage = "intense"; }, 20000);
        setTimeout(() => { snowStage = "slowDown"; }, 50000);

        // 生成祝福窗口（随机倾斜-5~5度+先放大后缩小）
        function createBlessingWindow() {
            const win = document.createElement("div");
            win.className = "blessing-window";
            
            // 随机倾斜角度（-5°~5°，更活泼）
            const rotateAngle = (Math.random() - 0.5) * 10;
            win.style.setProperty("--rotate-angle", `${rotateAngle}deg`);
            
            // 随机选祝福+背景色
            const randomIdx = Math.floor(Math.random() * blessings.length);
            win.textContent = blessings[randomIdx];
            blessings.splice(randomIdx, 1);
            if (blessings.length === 0) blessings.push(...[
                "立冬添暖衣，考研笔锋锐，岸上见！",
                "冬来寒意起，考公稳上岸，前路坦途~",
                "立冬快乐！钱包鼓鼓，财运追着跑💰",
                "寒风裹温柔，身体倍儿棒，病痛全溜~",
                "立冬已至，考研初试稳，复试顺拿offer！",
                "冬藏好运气，考公笔试第一，面试超神！",
                "立冬暖身又暖心，发财速度赶雪花飘~",
                "冬来无恙，健康常驻，岁岁皆安❤️",
                "立冬裹厚衣，考研知识点全进脑，高分稳！",
                "寒风吹不散运，考公上岸+钱包鼓，双倍乐~",
                "立冬快乐！身体像小太阳，暖和又健康",
                "冬意渐浓，发财脚步不停，钱包越来越鼓~"
            ]);
            win.style.background = windowBgColors[Math.floor(Math.random() * windowBgColors.length)];
            
            // 随机位置
            const x = Math.random() * (window.innerWidth - 160);
            const y = Math.random() * (window.innerHeight - 80);
            win.style.left = `${x}px`;
            win.style.top = `${y}px`;

            document.body.appendChild(win);
        }

        // 启动雪花（持续到60秒后停止）
        snowTimer = setInterval(createSnow, 300);
        setTimeout(() => clearInterval(snowTimer), 60000);

        // 启动祝福窗口（60秒后停止弹出）
        const windowTimer = setInterval(createBlessingWindow, 500);
        setTimeout(() => clearInterval(windowTimer), 60000);
    </script>
</body>
</html>

